<template>
	<wsPage title="提现申请">
	
		<div slot="page_operate">
			<Button type="ghost" @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<Collapse value = "1" style="margin-bottom: 10px;">
	        <Panel name="1">
	            商户资金信息
	            <div slot="content" style="padding-left: 10px;">
	            	<Row>
	            		<Col span="8">
	            			商户总资金：{{merchantAccount.totalAmount}}
	            		</Col>
	            		<Col span="8">
	            			商户可提现金额：{{merchantAccount.withdrawAmount}}
	            		</Col>
	            		<div style="color:red;font-size: small;padding-top: 30px;">＊注意：提现资金会被冻结7天，每周的周一系统会对提现款项进行支付打款（节假日顺延）</div>
	            	</Row>
	            </div>
	        </Panel>
    	</Collapse>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="申请状态">
							<Select clearable v-model="queryForm.status" placeholder="请选择" class="ws-form-select">
									<Option value="1">申请中</Option>
									<Option value="2">审核通过</Option>
									<Option value="3">审核驳回</Option>
							</Select>
					</FormItem>
					<FormItem label="申请时间">
						<Row>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" placeholder="查询开始时间" v-model="queryForm.searchStartTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			                <Col span="2" style="text-align: center">-</Col>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" placeholder="查询结束时间" v-model="queryForm.searchEndTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			            </Row>      
			        </FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<Button type="ghost"  @click="addModalShow">申请提现</Button>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>

		<!--申请提现弹框-->
		<wsModal v-model="withdrawModal.show" ok-text="申请提现" title="申请提现" @on-ok="withdrawModalOk" @on-cancel="withdrawModalCancel">
		    <Form ref="withdrawForm" :model="withdrawModal.form" :rules="withdrawModal.validate" :label-width="100">
				<FormItem label="支付账号" prop="paymentAccountId">
						<Select clearable v-model="withdrawModal.form.paymentAccountId" placeholder="请选择" class="ws-form-select" style="width:200px">
								<Option v-for="item in accounts" :value="item.value">{{item.label}}</Option>
						</Select>
				</FormItem>
				<FormItem label="提现金额" prop="money">
		            <Input v-model="withdrawModal.form.money" style="width:200px"></Input>
		        	<span style="color:red;font-size:xx-small;">* 商户可提现金额：{{merchantAccount.withdrawAmount}}</span>
		        </FormItem>
				<FormItem label="备注" prop="memo">
		            <Input v-model="withdrawModal.form.memo" style="width:200px"></Input>
		        </FormItem>
		        <FormItem label="提现规则说明:">
		        	<p>服务费比例：{{merchantInfoForm.withdrawHandlingChargeRate}}%</p>
		        	<p>最小服务费用：{{merchantInfoForm.withdrawMinHandlingCharge}}元</p>
		        	<p>最小提现金额:{{merchantInfoForm.withdrawMinAmount}}元</p>
		        </FormItem>
		    </Form>
		</wsModal>
	</wsPage>
</template>

<script>
import Common from '../../../common/common.js';
	export default {
		data() {
			return {
				queryForm: {
					status: '',
					searchStartTime: '',
					searchEndTime: ''
				},
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
					{
						title: '编号',
						key: 'sn',
	          align: 'center'
					},
					{
						title: '银行名称',
						key: 'bank',
	          align: 'center'
					},
					{
						title: '支行名称',
						key: 'bankBranch',
	          align: 'center'
					},
					{
						title: '账户类型',
						key: 'accountType',
	          align: 'center',
						render: (h, params) => {
							return h('span',{

							},this.checkType(params.row.accountType))
						}
					},
					{
						title: '账号',
						key: 'accountNumber',
	          align: 'center'
					},
					{
						title: '提现金额',
						key: 'money',
	          align: 'center'
					},
					{
						title: '状态',
						key: 'status',
	          align: 'center',
						render: (h, params) => {
							return h('Tag',{
								props: {
                        			type: 'border',
                        			color: params.row.status === 1 ?'blue': params.row.status === 2 ? 'green' : 'red'
                        		}
							},this.checkStatus(params.row.status))
						}
					},
					{
						title: '备注信息',
						key: 'memo',
	          align: 'center'
					},
					{
						title: '创建日期',
						key: 'createDate',
	          align: 'center',
                        fixed: 'right'
					}],

					data: [],
					accounts: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				//商户资金
				merchantAccount:{},
				//申请提现弹框
				withdrawModal: {
					show: false,
					form: {
						paymentAccountId: '',
						money: '',
						memo: ''
					},
					validate: {
						paymentAccountId: [
	                        { required: true, message: '请选择支付账号', trigger: 'blur' }
	                    ],
						money: [
	                        { required: true, message: '请填写提现金额', trigger: 'blur' },
	                        {validator: Common.validatePrice, trigger: 'blur' },
	                        {validator: Common.validateTrim, trigger: 'blur'}
	                    ],
					}
				},
				clickSave: false,
				merchantInfoForm:{
					withdrawHandlingChargeRate:'',
					withdrawMinAmount: '',
					withdrawMinHandlingCharge:''
				},
			}
		},
		computed: {

		},
		mounted() {
			this.init();
		},
		methods: {
			addModalShow(){
				this.queryAccounts();
				this.queryRule();
			},
			/**
			 * 判断账户类型
			 */
			checkType(accountType){
				if(accountType == 1) return '支付宝';
				if(accountType == 2) return '微信';
				if(accountType == 3) return '银联账户';
				if(accountType == 4) return '银行账户';
			},
			/**
			 * 判断状态
			 */
			checkStatus(status){
				if(status == 1) return '申请中';
				if(status == 2) return '审核通过';
				if(status == 3) return '审核驳回';
			},

			//查询开始时间段必填
			dateConfirm(){
				let searchStartTime = this.queryForm.searchStartTime;
				let searchEndTime = this.queryForm.searchEndTime;
				if (searchStartTime != null ||searchStartTime != '') {
					searchEndTime = new Date();
				} else if (searchEndTime != null || searchEndTime !='') {
					searchStartTime = searchEndTime;
				}
			},

			init() {
				this.clickSave = false;
				this.query();
				this.queryMerchantAccounts();
			},
			//刷新
			refresh(){
				this.queryForm.status = '';
				this.queryForm.searchStartTime = '';
				this.queryForm.searchEndTime = '';
				this.table.page.pageNum = 1;
				this.init();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ms/merchantWithdrawRecords?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 申请提现的弹框取消操作
			 */
			withdrawModalCancel() {
				this.$refs['withdrawForm'].resetFields();
				this.withdrawModal.show = false;
				this.clickSave = false;
			},
			/**
			 * 申请提现的弹框确认操作
			 */
			withdrawModalOk() {
				this.$refs['withdrawForm'].validate((valid) => {
					if (valid) {
						this.merchantWithdraw();
			        } else {
			            this.$Message.error('请完善信息！');
			        }
               });
			},
			/**
			 * 申请提现
			 */
			merchantWithdraw(){
				if(this.clickSave){
					this.$Message.warning('请不要重复点击');
					return;
				}
				this.clickSave = true;
				const _this = this;
				this.axios.post('/ws/ms/merchantWithdrawRecord', _this.withdrawModal.form).then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('申请成功');
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('申请失败:' + message_);
					}
					_this.$refs['withdrawForm'].resetFields();
					_this.withdrawModal.show = false;
					_this.init();
				});
			},

			/**
			*	查询账户
			*/
			queryAccounts(){
				const _this = this;
				this.axios.get('/ws/ms/merchantPaymentAccounts/findvalue').then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.accounts = res.data;
						_this.withdrawModal.show = true;
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('查询卡类型失败:' + message_);
					}
				});
			},

			//查询商户资金
			queryMerchantAccounts(){
				const _this = this;
				this.axios.get('/ws/ms/merchantAccounts/findaccount').then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.merchantAccount = res.data[0];
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('查询商户资金失败:' + message_);
					}
				});
			},
			queryRule() {
				const _this = this;
				this.axios.get('/ws/ops/platformFinanceSettings/1').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						var data=res.data;
						_this.merchantInfoForm=data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},	


		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>
